<template>
	<view class="main pr">
		<u-swiper :list="list1" keyName="image" :height="300" @change="change" @click="click"></u-swiper>
		<view class="box pa ">
			<view class="top xflex-x-between">
				<view class="xflex-x">
					<u-switch v-model="night" @change="changeswitch" size="20"></u-switch>
					<view class="xml12 top-tips">
						当夜特价 开启后优先推荐<text>特价</text>酒店
					</view>
				</view>
				<image class="top-icon" @click="show = true" src="/static/image/index/yiwen.png" mode=""></image>
			</view>

			<view class="address xflex-x xmt50 xbb8D xpb32">
				<view class="address-left xflex-x-between xflex1">
					<view class="xflex-x">
						<image class="address-sou xmr12" src="/static/image/index/sousuo.png" mode=""></image>
						<input type="text" v-model="counter.enterInfo.keyword" disabled
							class="address-name xfw500 clamp" placeholder-class="address-placeholder"
							placeholder="位置/品牌/酒店" />
					</view>

					<!-- <image class="address-jt xmr32" src="/static/image/index/jiantou.png" mode=""></image> -->
				</view>
				<view class="address-right xflex-x-center" @click="addressInfo.show = true">
					<view class="xmr12">
						当前位置
					</view>
					<image class="address-wzicon" src="/static/image/index/dw.png" mode=""></image>
				</view>
			</view>


			<view class="condition xflex-x-between xbb8D" @click="roomdata.show = true">
				<view class="" :class="counter.enterInfo.house.length== 0 ? 'condition-lefts' :'condition-left'">
					{{adult}}成人 · {{child}}儿童 · {{counter.enterInfo.house.length}}间 <span
						v-if="counter.enterInfo.type">· {{counter.enterInfo.type}}</span>
				</view>
				<image class="condition-img" src="/static/image/index/jiantou.png" mode=""></image>
			</view>

			<view class="time xflex-x-between xbb8D" @click="timeData.show = true">
				<view class="xflex-x">
					<view class="time-item xmr60">
						<view class="time-name xmb12">
							{{getDayOfWeek(counter.enterInfo.start)}}入住
						</view>
						<view class="xflex-x">
							<view class="time-year">
								{{toformatDate(counter.enterInfo.start)}}
							</view>
							<view class="time-week xml12">
								{{getWeekday(counter.enterInfo.start)}}
							</view>
						</view>
					</view>
					<view class="time-item">
						<view class="time-name xmb12">
							{{getDayOfWeek(counter.enterInfo.end)}}离店
						</view>
						<view class="xflex-x">
							<view class="time-year">
								{{toformatDate(counter.enterInfo.end)}}
							</view>
							<view class="time-week xml12">
								{{getWeekday(counter.enterInfo.end)}}
							</view>
						</view>
					</view>
				</view>
				<view class="xflex-x">
					<view class="time-sum">
						共{{counter.enterInfo.day}}晚
					</view>
					<image class="time-img xml12" src="/static/image/index/jiantou.png" mode=""></image>
				</view>
			</view>


			<view class="price xpb40 xbb8D">
				<view class="xflex-x-between xmt20">
					<view class="xc1 xfz26 xfw500 xflex-x" @click="pricePopup.show = true">
						<view class="xmr10">
							客房单价（一晚）
						</view>
						<view class="" style="color: #0EBBFB;">
							修改
						</view>
					</view>
					<view class="xcf5 xfz24 xfw500">
						当前价格成功率<span class="price-color xfz30 xml12">95%</span>
					</view>
				</view>

				<view class="xpt32 xpb40">
					<w-slider @touchEnd="onprice" ref="wsliderref" :endPrice="max"
						:defaultprice="counter.enterInfo.price"></w-slider>
				</view>
			</view>


			<view class="tag xmt32  xflex-x-between">
				<view class="tag-item pr xmr20 xflex-x" @click="getordersave()">
					<image class="tag-icon" src="/static/image/index/bc.png" mode=""></image>
					<view class="">
						保存需求
					</view>
					<view class="tag-doubt pa" style="" v-if="savenum >0">
						{{savenum}}
					</view>
				</view>
				<view class="tag-item xmr20 xflex-x" @click="conditionData.show = true">
					<image class="tag-icon" src="/static/image/index/sx.png" mode=""></image>
					<view class="">
						更多筛选
					</view>

				</view>
				<view class="tag-item xmr20 xflex-x" @click="tipsshow = true">
					<image class="tag-icon" src="/static/image/index/dingdan.png" mode=""></image>
					<view class="">
						远期订单/价格提醒
					</view>

				</view>
			</view>

			<view class="sub" @click="getorderadd()">
				订单发布
			</view>

			<view class="" style="height: 200rpx;">

			</view>
		</view>
	</view>


	<u-popup mode="center" :show="pricePopup.show" round="12">

		<view class="popups pr">
			<view class="popups-title">
				请输入价格
			</view>
			<!-- <image class="popups-gb pa" @click="info.show = false" src="../../g" mode=""></image> -->
			<view class="popups-put xflex-x">
				<input type="text" placeholder="请输入价格" v-model="pricePopup.value" />
			</view>

			<view class="xflex-x-center popups-btn">
				<view class="popups-btn1" @click="pricePopup.show = false">
					取消
				</view>
				<view class="popups-btn2 xml32" @click="hx()">
					确定
				</view>
			</view>
		</view>



	</u-popup>

	<u-popup :show="show" mode="center" :round="18">
		<view class="popup pr xflex-y-center xjc">
			<image class="popup-gb pa" @click="show = false" src="/static/image/index/popup-gb.png" mode=""></image>

			<view class="popup-title xmt40">
				当夜特价订房说明
			</view>

			<view class="popup-content xmt50">
				<scroll-view scroll-y="true" style="height: 300rpx;">
					<u-parse :content="rith"></u-parse>

				</scroll-view>
			</view>
		</view>
	</u-popup>


	<u-popup :show="tipsshow" mode="center" :round="18">
		<view class="popup pr xflex-y-center xjc">
			<image class="popup-gb pa" @click="tipsshow = false" src="/static/image/index/popup-gb.png" mode=""></image>

			<view class="popup-title xmt40">
				远期订单/价格提醒
			</view>

			<view class="popup-content xmt50">
				<scroll-view scroll-y="true" style="height: 300rpx;">
					<u-parse :content="tisprith"></u-parse>

				</scroll-view>
			</view>
		</view>
	</u-popup>

	<ads :city="addressInfo.city" :hot="addressInfo.hot" v-if="addressInfo.show" @close="addressInfo.show = false">
	</ads>

	<star v-if="roomdata.show" @close="roomdata.show = false"></star>

	<timeComponent v-if="timeData.show" @close="timeData.show = false" />

	<condition v-if="conditionData.show" @close="conditionData.show = false" />



	<u-tabbar :value="0" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
		<template>
			<u-tabbar-item text="订酒店" @click="toReat('/pages/index/index')">
				<image :style="{width: '46rpx',height: '44rpx',}" slot="active-icon"
					src="/static/image/tabbar/home1.png"></image>
				<image :style="{width: '46rpx',height: '44rpx',}" slot="inactive-icon"
					src="/static/image/tabbar/home.png"></image>
			</u-tabbar-item>

			<u-tabbar-item @click="toReat('/pages/cart/cart')">
				<image :style="{width: '80rpx',height: '80rpx',}" slot="active-icon"
					src="/static/image/tabbar/add1.png"></image>
				<image :style="{width: '80rpx',height: '80rpx',}" slot="inactive-icon"
					src="/static/image/tabbar/add.png"></image>
			</u-tabbar-item>

			<u-tabbar-item text="我的" @click="toReat('/pages/mine/mine')">
				<image :style="{width: '46rpx',height: '44rpx',}" slot="active-icon"
					src="/static/image/tabbar/mine1.png"></image>
				<image :style="{width: '46rpx',height: '44rpx',}" slot="inactive-icon"
					src="/static/image/tabbar/mine.png"></image>
			</u-tabbar-item>
		</template>
	</u-tabbar>


</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref,
		computed
	} from 'vue';

	import {
		slides,
		cityList,
		address,
		orderadd,
		userInfo,
		indexcontent,
		setNightSpecial,
		ordersave,
		hotelconfig
	} from "../../network/home.js"
	import ads from "@/components/index/ads.vue"
	import star from "@/components/index/star.vue"
	import timeComponent from "@/components/index/time.vue"
	import condition from "@/components/index/condition.vue"

	import {
		useCounterStore
	} from '@/Store/index'
	const counter = useCounterStore()
	import {
		getDayOfWeek,
		getWeekday,
		toformatDate
	} from '../../utils/common.js'


	const changeswitch = () => {
		setNightSpecial()
	}

	let savenum = ref(0)
	hotelconfig().then(res => {
		savenum.value = res.data.save_num
	})

	// 获取最大值
	let max = ref(0)
	indexcontent({
		name: 'filter_price_max'
	}).then(res => {
		max.value = res.data
	})
	let tab = reactive({
		list: [{
				type: 'solt',
				selected: '/static/image/tabbar/home.png',
				unselected: '/static/image/tabbar/home1.png',
				text: '首页',
				path: '/pages/index/index'
			},
			{
				type: 'solt',
				selected: '/static/image/tabbar/mine.png',
				unselected: '/static/image/tabbar/mine.png',
				path: '/pages/cart/cart'
			},
			{
				type: 'solt',
				selected: '/static/image/tabbar/mine.png',
				unselected: '/static/image/tabbar/mine.png',
				text: '我的',
				path: 'pages/mine/mine'
			}
		],
		style: {
			width: '46rpx',
			height: '44rpx',
		},
	})

	let show = ref(false)

	let wsliderref = ref(false)

	let pricePopup = reactive({
		show: false,
		value: ''
	})


	let hx = () => {
		console.log(counter.enterInfo.price < pricePopup.value,max.value, pricePopup.value);
		if (Number(max.value) < Number(pricePopup.value)) {
			uni.showToast({
				icon:"none",
				title:"输入值超过最大值"
			})
			return
		}
		counter.enterInfo.price = pricePopup.value
		pricePopup.show = false
		setTimeout(() => {
			wsliderref.value.hkwz()
		}, 500);
	}


	const rith = ref('')
	indexcontent({
		name: 'night_discount_intro'
	}).then(res => {
		rith.value = res.data
	})
	let tipsshow = ref(false)
	let tisprith = ref('')
	indexcontent({
		name: 'far_order_remind'
	}).then(res => {
		tisprith.value = res.data
	})
	let token = uni.getStorageSync("token")
	// 获取个人信息
	let night = ref(false)
	if (token) {
		userInfo().then(res => {
			console.log(res);
			night.value = res.data.night_special == 1
		})
	}


	const toReat = (url) => {
		uni.reLaunch({
			url: url
		})
	}

	// 获取bannar
	const getslides = () => {
		slides().then(res => {
			console.log(res);
			list1.value = res.data
		})
	}


	const onprice = (e) => {
		console.log(e, "====");
		counter.enterInfo.price = e
		console.log(counter.enterInfo);
	}


	getslides()


	const toPage = (url) => {
		uni.navigateTo({
			url: url
		})
	}

	let list1 = ref([])

	let value4 = ref(true)



	let popup = ref()

	onShow(() => {
		setTimeout(() => {
			wsliderref.value.hkwz()
		}, 500);
	})

	function compare(a, b) {
		if (a.letter < b.letter) {
			return -1;
		}
		if (a.letter > b.letter) {
			return 1;
		}
		return 0;
	}
	// 获取城市列表
	const getcityList = () => {
		cityList({
			type: 'inland'
		}).then(res => {
			console.log(res);
			addressInfo.city = res.data.city
			addressInfo.hot = res.data.hot
			const alphabetArray = Array.from({
				length: 26
			}, () => []);

			res.data.city.forEach(item => {
				const index = item.letter.toLowerCase().charCodeAt(0) - 97; // 获取字母在字母表中的索引位置
				alphabetArray[index] = item.data;
			});

			addressInfo.city = alphabetArray
		})
	}

	getcityList()

	// 获取定位
	let addressInfo = reactive({
		show: false,
		hot: [],
		city: []
	})



	const getaddress = () => {
		uni.getLocation({
			success(res) {
				console.log(res);
				counter.enterInfo.lat = res.latitude
				counter.enterInfo.lng = res.longitude
				counter.enterInfo.address = res.address
				counter.enterInfo.addressname  = res.name
				counter.enterInfo.keyword = res.name
				if (counter.enterInfo.keyword) {
					return
				}

				address({
					lat: res.latitude,
					lng: res.longitude
				}).then(ress => {
					console.log(ress);
					counter.enterInfo.address = ress.data.city
					counter.enterInfo.addressname = ress.data.address
					counter.enterInfo.keyword = ress.data.address
				})

			},
			fail(err) {
				console.log(err);
			}
		})
	}

	getaddress()


	// 房间

	let roomdata = reactive({
		show: false
	})


	// 计算成人
	let adult = computed(() => {
		let num = 0
		counter.enterInfo.house.forEach(item => {
			num += item.adult
		})
		return num
	})

	// 儿童
	let child = computed(() => {
		let num = 0
		counter.enterInfo.house.forEach(item => {
			num += item.children
		})
		return num
	})


	// 时间
	let timeData = reactive({
		show: false
	})



	// 获取当前时间
	const getTimeYear = () => {
		// 创建一个新的Date对象，默认是当前日期和时间  
		var currentDate = new Date();

		// 获取年份  
		var year = currentDate.getFullYear();

		// 获取月份，注意月份是从0开始的，所以需要加1  
		var month = currentDate.getMonth() + 1;

		// 获取日期  
		var day = currentDate.getDate();

		// 格式化输出，例如 "2023-07-18"  
		var formattedDate = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);



		counter.enterInfo.start = formattedDate


		// 计算明天的日期  
		var tomorrow = new Date(currentDate);
		tomorrow.setDate(currentDate.getDate() + 1); // 增加一天  

		// 获取明天的年月日  
		var tomorrowYear = tomorrow.getFullYear();
		var tomorrowMonth = tomorrow.getMonth() + 1;
		var tomorrowDay = tomorrow.getDate();

		// 格式化明天的年月日  
		var formattedTomorrowMonth = tomorrowMonth < 10 ? '0' + tomorrowMonth : tomorrowMonth;
		var formattedTomorrowDay = tomorrowDay < 10 ? '0' + tomorrowDay : tomorrowDay;
		var formattedTomorrow = tomorrowYear + '-' + formattedTomorrowMonth + '-' + formattedTomorrowDay;

		counter.enterInfo.end = formattedTomorrow
		counter.enterInfo.day = 1

		console.log("=======", counter.enterInfo);
	}

	getTimeYear()


	let conditionData = reactive({
		show: false
	})


	// 保存需求
	const getordersave = () => {
		ordersave(counter.enterInfo).then(res => {
			// console.log(res);
			uni.showToast({
				icon: "none",
				title: '保存成功'
			})
			counter.enterInfo.order_id = ''
			hotelconfig().then(res => {
				savenum.value = res.data.save_num
			})
		})
	}

	const getorderadd = () => {
		orderadd(counter.enterInfo).then(res => {
			// console.log(res);
			uni.showToast({
				icon: "none",
				title: '发布成功'
			})
			counter.enterInfo.order_id = ''

			uni.navigateTo({
				url: '/pages/mine/order/myOrder?type=1'
			})
		})
	}
</script>

<style lang="scss">
	.main {
		height: 100vh;
	}

	.box {
		height: calc(100% - 280px);
		width: 100%;
		background-color: #fff;
		top: 280px;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.top {
		width: 710rpx;
		height: 68rpx;
		background: #FDEFEF;
		border-radius: 34rpx;
		padding: 12rpx;
		box-sizing: border-box;

		&-icon {
			width: 36rpx;
			height: 36rpx;
		}

		&-tips {

			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #814D21;
			line-height: 40rpx;

			&>text {
				color: #EF755E;
			}
		}
	}

	.address {
		&-sou {
			width: 36rpx;
			height: 36rpx;
		}

		&-jt {
			width: 24rpx;
			height: 24rpx;
		}

		&-left {
			border-right: 1rpx solid #F2F2F2;

		}

		&-right {
			width: 211rpx;
		}

		&-wzicon {
			width: 40rpx;
			height: 40rpx;
		}

		&-placeholder {

			color: #D0D0D0;
		}

		&-name {
			color: #111111;
		}
	}

	.condition {
		padding: 32rpx 0;

		&-left {
			font-weight: 500;
			font-size: 36rpx;
			color: #111111;
		}

		&-lefts {
			font-weight: 500;
			font-size: 36rpx;
			color: #D0D0D0;
		}


		&-img {
			width: 24rpx;
			height: 24rpx;
		}
	}

	.time {

		padding: 38rpx 0 20rpx 0;

		&-name {
			font-weight: 500;
			font-size: 24rpx;
			color: #5F5F5F;
		}

		&-year {
			font-weight: 500;
			font-size: 36rpx;
			color: #111111;
		}

		&-week {
			font-weight: 500;
			font-size: 28rpx;
			color: #111111;
		}

		&-sum {
			font-weight: 500;
			font-size: 26rpx;
			color: #198FFF;
		}

		&-img {
			width: 24rpx;
			height: 24rpx;
		}
	}

	.price {
		&-color {
			color: #2AA44D;
		}
	}

	.tag {

		&-item {
			background: #F7F9FC;
			border-radius: 10rpx;
			padding: 14rpx 22rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #198FFF;
		}

		&-icon {
			width: 28rpx;
			height: 28rpx;
			margin-right: 2rpx;
		}

		&-doubt {
			width: 24rpx;
			height: 24rpx;
			line-height: 24rpx;
			text-align: center;
			// margin-left: 8rpx;
			right: -12rpx;
			top: -12rpx;
			border-radius: 50%;
			background: #198FFF;
			color: #fff;
		}
	}

	.sub {
		margin: auto;
		margin-top: 48rpx;
		width: 630rpx;
		height: 102rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 51rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 102rpx;
		text-align: center;
	}

	.popup {
		width: 600rpx;
		height: 370rpx;
		background: #FFFFFF;
		border-radius: 30rpx;

		&-gb {
			width: 40rpx;
			height: 40rpx;
			top: 30rpx;
			right: 30rpx;
		}

		&-title {
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
			text-align: center;
		}

		&-content {
			width: 492rpx;
			height: 149rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
		}
	}


	.popups {
		width: 600rpx;
		// height: 420rpx;
		background: #FFFFFF;
		border-radius: 30rpx;

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
			text-align: center;
			margin-top: 40rpx;
		}

		&-gb {
			width: 40rpx;
			height: 40rpx;
			top: 30rpx;
			right: 30rpx;
		}

		&-put {
			width: 420rpx;
			height: 88rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin: auto;
			margin-top: 85rpx;
			padding: 0 40rpx;

		}

		&-btn {
			margin-top: 61rpx;
		}

		&-btn1 {
			width: 214rpx;
			height: 72rpx;
			border-radius: 36rpx;
			border: 1px solid #999999;

			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
			text-align: center;
			line-height: 72rpx;
		}

		&-btn2 {
			width: 214rpx;
			height: 72rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			border-radius: 36rpx;

			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #fff;
			text-align: center;
			line-height: 72rpx;
		}
	}

	.bom {

		&-icon {
			width: 21rpx;
			height: 21rpx;
		}

		&-text {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #666666;
		}

		&-time {
			font-weight: bold;
			font-size: 32rpx;
			color: #198FFF;
		}

		&-qx {
			width: 214rpx;
			height: 72rpx;
			border-radius: 36rpx;
			border: 1px solid #CCCCCC;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #666666;
			text-align: center;
			line-height: 72rpx;
		}

		&-qr {
			width: 214rpx;
			height: 72rpx;
			border-radius: 36rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #fff;
			text-align: center;
			line-height: 72rpx;
		}

	}
</style>